<template>
	<div class="multiple-select">
		<el-popover  placement="bottom" trigger="click" :width="width">
			<el-tree :data="dataList" show-checkbox default-expand-all node-key="id" ref="tree" @check="checkCheck"
			 highlight-current :props="defaultProps" :default-checked-keys="initValue" >
			</el-tree>
			<el-input v-model="selectedNodeName" :placeholder="placeholder" maxlength="20" slot="reference" readonly @focus="focus"></el-input>
		</el-popover>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.selectedMap = this.changeTresListToNormMap(this.dataList,{});
			if(this.initValue && this.initValue.length > 0){
				this.selectedKeys = this.initValue;
				let ret = this.calculateSelectName(this.selectedKeys);
				let selectedNodeName = ret.selectedNodeName;
				let suffix = ret.suffix;
				this.selectedNodeName = selectedNodeName + suffix;
				this.$emit('initNames', this.selectedNodeName);
			}
		},
		watch:{
			isInit(){
				if(this.isInit){
					this.selectedMap = this.changeTresListToNormMap(this.dataList,{});
					if(this.initValue && this.initValue.length > 0){
						this.selectedKeys = this.initValue;
						let ret = this.calculateSelectName(this.selectedKeys);
						let selectedNodeName = ret.selectedNodeName;
						let suffix = ret.suffix;
						this.selectedNodeName = selectedNodeName + suffix;
						this.initValue.push(-1);
						this.initValue.pop();
					}
				}else{
					this.resetSelect();
				}
			},
			dataList(){
				this.selectedMap = this.changeTresListToNormMap(this.dataList,{});
				if(this.initValue && this.initValue.length > 0){
					this.selectedKeys = this.initValue;
					let ret = this.calculateSelectName(this.selectedKeys);
					let selectedNodeName = ret.selectedNodeName;
					let suffix = ret.suffix;
					this.selectedNodeName = selectedNodeName + suffix;
				}else{
					this.selectedNodeName = "";
				}
			}
		},
		props: {
			that: {
				type: Object,
				default: this
			},
			width: {
				type: Number,
				default: null
			},
			// 表格数据
			dataList: {
				type: Array,
				default: () => []
			},
			childrenName:{
				type:String,
				default:"children"
			},
			keyName:{
				type:String,
				default:"id"
			},
			label:{
				type:String,
				default:"name"
			},
			inputMaxNum:{
				type:Number,
				default:5
			},
			isInit:{
				type:Boolean,
				default:false
			},
			initValue:{
				type:Array,
				default:() => []
			},
			placeholder:{
				type:String,
				default:"请选择"
			}
		},
		data(){
			return {
				selectedNodeName:"",
				selectedKeys: [],
				selectedMap:[],
				defaultProps: {
					children: this.childrenName,
					key: this.keyName,
					label: this.label
				},
				intersectionList:[],
				deleteList:[]
			}
		},
		methods:{
			checkCheck(nodeData,treeCheckInfo){
				let checkedKeys = treeCheckInfo.checkedKeys;
				let ret = this.calculateSelectName(checkedKeys);
				let selectedKeys = ret.selectedKeys;
				this.selectedKeys = selectedKeys;
				let selectedNodeName = ret.selectedNodeName;
				let suffix = ret.suffix;
				this.calcluateDiff();
				this.$emit("checkCheck",{
					selectedKeys:selectedKeys,
					selectedNodeName:selectedNodeName,
					intersectionList:this.intersectionList,
					deleteList:this.deleteList
				})
				this.selectedNodeName = selectedNodeName + suffix;
				this.$emit('nameChange', this.selectedNodeName);
			},
			focus(){
				this.$emit("myFocus");
			},
			changeTresListToNormMap(oldlist,newMap){
				if(!oldlist || oldlist.length == 0){
					return;
				}
				if(!newMap){
					newMap = {};
				}
				let keyName = this.defaultProps.key;
				if(!keyName){
					keyName = "id";
				}
				let childrenName =this.defaultProps.children;
				if(!childrenName){
					childrenName = "children";
				}
				for (let i = 0 ; i < oldlist.length;i++) {
					let item = oldlist[i];
					let key = item[keyName];
					if(item[childrenName]){
						item.isLeaf = false;
						this.changeTresListToNormMap(item[childrenName],newMap);
					}else{
						item.isLeaf = true;
						
					}
					if(!newMap[key]){
						newMap[key] = item;
					}
				}
				return newMap;
			},
			calcluateDiff(){
				let selectedKeys =  this.selectedKeys;
				let initValue = this.initValue;
				if(!selectedKeys || selectedKeys.length == 0 ){
					return;
				}
				var sameList = Array.intersect(selectedKeys, initValue);
				this.intersectionList = Array.minus(selectedKeys,sameList);//新增的集合
				this.deleteList = Array.minus(initValue,sameList);//删除的集合
			},
			calculateSelectName(checkedKeys){
				let selectedNodeName = "";
				let suffix = "";
				let selectedKeys = [];
				if(checkedKeys.length > 0){
					let label = this.defaultProps.label;
					let leafNum = 0;
					let selectedMap = this.selectedMap;
					let maxL = this.inputMaxNum;
					let isCalculateCheck = Boolean(checkedKeys);//是否计算的是选择的
					let keys = isCalculateCheck?checkedKeys:selectedKeys;
					for(let i = 0 ; i < keys.length ; i++){
						let id = keys[i];
						let item = selectedMap[id];
						if(!isCalculateCheck || item.isLeaf){
							if(leafNum < maxL){
								selectedNodeName += item[label] + ",";
							}else{
								suffix =" ┄"
							}
							if(isCalculateCheck && !selectedKeys.includes(id)){
								selectedKeys.push(id);
							}
							leafNum++;
						}
					}
					selectedNodeName = selectedNodeName.substring(0,selectedNodeName.length-1);
				}
				return{
					selectedNodeName:selectedNodeName,
					selectedKeys:selectedKeys,
					suffix:suffix
				}
			},
			resetSelect(){
				this.selectedKeys = [];
				this.selectedNodeName = "";
				this.intersectionList = [];
				this.deleteList = [];
				this.$refs.tree.setCheckedKeys([]);
			},
			getSelected(){
				
			}
		},
		
	}
</script>

<style scoped="scoped">
	.multiple-select{
		width: 100%;
	}
	::v-deep .el-popover {
		box-sizing: border-box;
	}

	.el-tree {
		overflow: auto;
		max-height: 300px;
	}

	::v-deep .el-tree-node>.el-tree-node__children {
		overflow: inherit;
	}

	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: #F5F5F5;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
		border-radius: 10px;
		background-color: #F5F5F5;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: $mainColor;
	}
</style>
